<template>
   <div class="box_">
       <div class="sys_info">
           <img src="../../../public/static/nav/gonggao.png" alt="">
           系统公告：
        <div style="overflow: hidden;position: relative">
            <p>{{$store.state.sys_announcement}}</p>
        </div>
       </div>
      <div>
          欢迎您!
           <span class="but_" @click="shutDown">
           {{username}}
          </span>
          <span class="but_" @click="logout">
              退出
          </span>
      </div>
   </div>
</template>

<script>
import api from "@/api";

export default {
    name: "HomeHeader",
    data(){
        return{
            logoutInfo:{
                id:"",
            },
            sys_announcement:"",
            username:"",
        }
    },
    mounted() {
        this.username = JSON.parse(window.localStorage.getItem("user")).username;
      api.getAnnouncement(1).then((res)=>{
          if(res.data.code === 200 && res.data.data.length>0){
              this.$store.commit("sys_announcement",res.data.data[0].content);
          }
      })
    },
    methods:{
        shutDown(){
          this.$emit("shutDown");
        },
        logout(){
            api.logout().then((res)=>{
                if(res.data.code === 200){
                    this.$store.commit("requestInfo", "已退出登录");
                    window.localStorage.clear();
                    this.$router.push("/login")
                }
            })
        },
    }
}
</script>

<style scoped>
.box_{
    width: 100% !important;
    min-width: 800px;
    height: 45px;
    background: #22252c;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid white;
}
.sys_info{
    display: flex;
    justify-content: left;
    align-items: center;
    margin-left: 30px;
    width: 500px;
    overflow: hidden;
}
.sys_info p{
    width: 390px;
    white-space: nowrap;
    transform: translateX(100%);
    animation: info 18s linear 0s infinite ;
}
@keyframes info {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-200%);
    }

}

.sys_info img{
    width: 20px;
    margin-right: 10px;

}
.but_{
    margin-right: 30px;
}
.but_:hover{
   cursor: pointer;
   text-decoration: underline;

}
</style>